﻿@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>监控布局编辑器</title>
    <link rel="stylesheet" type="text/css" href="~/css/bootstrap.min.css">
    <script type="text/javascript" src="~/lib/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="~/js/bootstrap.min.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }


        html {
            width: 100%;
            height: 100%;
        }

        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .minimap {
            position: absolute;
            top: 0;
            right: 0;
            z-index: 10000;
        }



        #tool {
            width: 20%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 99;
            background: #fff;
            border-right: 1px solid #ccc;
        }

        #box {
            width: 100%;
            height: 100%;
            overflow-y: auto;
        }

        #mountNode {
            width: 100%;
            height: 100%;
        }

        #attr {
            width: 15%;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 99;
            background: #fff;
            border-left: 1px solid #ccc;
            padding-top: 200px;
        }

        #tool .item {
            width: 300px;
            height: 200px;
            background: rgb(13, 158, 220);
            border-radius: 20px;
            margin: 0 auto;
            user-select: none;
            -webkit-user-select: none;
            user-drag: none;
            -webkit-user-drag: none;
            margin-top: 20px;
            overflow: hidden;
            padding: 5px;
        }

            #tool .item h2 {
                font-size: 20px
            }

            #tool .item img {
                height: 70%;
                user-select: none;
                -webkit-user-select: none;
                user-drag: none;
                -webkit-user-drag: none;
            }

        #box::-webkit-scrollbar {
            width: 6px;
        }

        #box::-webkit-scrollbar-thumb {
            background: #40a0ff49;
            border-radius: 10px;
        }

            #box::-webkit-scrollbar-thumb:hover {
                background: #40a0ff;
            }

        #box::-webkit-scrollbar-track {
            background: rgb(239, 239, 239);
            border-radius: 2px;
        }

        .btn-group {
            margin-top: 5px;
        }

        .sp {
            background: #40a0ff;
        }
    </style>
</head>

<body>

    <div id="tool">
        <div id="box">
            @*工具栏*@
            <div class="item" id="line"> <h2 style="text-align:center">线体右边</h2> <img src="/images/right.svg" /> </div>
            <div class="item" id="lineL"><h2 style="text-align:center">线体左边</h2> <img src="/images/left.svg" /></div>
            <div class="item" id="lineU"><h2 style="text-align:center">线体上边</h2> <img src="/images/shang.svg" /></div>
            <div class="item" id="lineD"><h2 style="text-align:center">线体下边</h2> <img src="/images/xia.svg" /></div>
            <div class="item" id="lineLR"><h2 style="text-align:center"></h2> <img src="/images/left_right.svg"  /></div>
            <div class="item" id="lineUD"><h2 style="text-align:center"></h2> <img src="/images/shang_xia.svg" /></div>
            <div class="item" id="lineMD"><h2 style="text-align:center">1.5MAX线体下边</h2> <img src="/images/xia.svg" /></div>
            <div class="item" id="lineMR"><h2 style="text-align:center">1.5MAX线体向右</h2> <img src="/images/right.svg" /></div>
            <div class="item" id="lineCD"><h2 style="text-align:center">1.5MAX线体上边</h2> <img src="/images/shang.svg" /></div>
            <div class="item" id="lineCR"><h2 style="text-align:center">1.5MAX线体左边</h2> <img src="/images/left.svg" /></div>
           <div class="item" id="lineTTMD"><h2 style="text-align:center">2MAX线体下边</h2> <img src="/images/xia.svg" /></div>
            <div class="item" id="lineTTMR"><h2 style="text-align:center">2MAX线体右边</h2> <img src="/images/right.svg" /></div>
            <div class="item" id="lineTMD"><h2 style="text-align:center">2MAX线体上边</h2> <img src="/images/shang.svg" /></div>
            <div class="item" id="lineTMR"><h2 style="text-align:center">2MAX线体左边</h2> <img src="/images/left.svg" /></div>
             <div class="item" id="lineqR"><h2 style="text-align:center">max</h2> <img src="/images/left_right.svg"  /></div>
            <div class="item" id="lineqD"><h2 style="text-align:center">max</h2> <img src="/images/shang_xia.svg" /></div>

            <div class="item" id="rb"><h2 style="text-align:center">机器人</h2> <img src="/images/rb.svg" /></div>
            <div class="item" id="sc"><h2 style="text-align:center">堆垛机</h2> <img src="/images/duiduoji_bai.png" /></div>
            <div class="item" id="warehouse"><h2 style="text-align:center">仓库</h2> <img src="/images/hjl.png" /></div>
            <div class="item" id="eleLayer"><h2 style="text-align:center">多层提升机</h2> <img src="/images/loucengtisheng.png" /></div>
            <div class="item" id="ocv"><h2 style="text-align:center">ocv</h2> <img src="/images/ocv.svg" /></div>
            <div class="item" id="eleLine"><h2 style="text-align:center">提升机</h2> <img src="/images/shengjiangji.png" /></div>
            <div class="item" id="bcr"><h2 style="text-align:center">BCR</h2> <img src="/images/saoma_68.png" /></div>
            <div class="item" id="bcr2"><h2 style="text-align:center">BCR2</h2> <img src="/images/saoma_681.png" /></div>
            <div class="item" id="lb"><h2 style="text-align:center; line-height:100px">标签</h2></div>
            <div class="item" id="pan"><h2 style="text-align:center; line-height:10px">盘点</h2><img src="/images/pan.svg" /></div>
        </div>
    </div>
    <div id="mountNode"></div> @*画布*@
    <div id="attr">
        @*右边功能区*@
        <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-primary" onclick="save()">保存</button>
            <button type="button" class="btn btn-danger" onclick="del()" data-toggle="tooltip" data-placement="top" title=""> 删除</button>

        </div>
        <div class="alert alert-success" role="alert" style="margin:0;color:#3c3c3c">
            保存快捷键: Ctrl+s
        </div>
        <div class="alert alert-danger" style="margin:0;color:#3c3c3c" role="alert">
            删除快捷键: Delete
        </div>
        <div class="alert alert-info" role="alert" style="margin:0;color:#3c3c3c">
            鼠标滚轮放大画布<br />左键拖动元素或者画布<br /> 需要设置设备号，显示界面自动识别数据
        </div>
        <div class="input-g">
            <h3>选中：<span id='nid' class="badge badge-secondary"></span></h3>

            <div class="input-group">
                <span class="input-group-addon sp" id="s2">楼层</span>
                <select name="selectList" id="selectLayer" onchange="selectChange()" class="form-control" aria-describedby="s2">
                    <option value="a1">一楼1层线体</option>
                    <option value="a2">一楼2层线体</option>
                    <option value="a3">一楼3层线体</option>
                    <option value="a4">一楼4层线体</option>
                    <option value="b1">二楼1层线体</option>
                    <option value="b2">二楼2层线体</option>
                    <option value="b3">二楼3层线体</option>
                    <option value="b4">二楼4层线体</option>
                    <option value="c1">三楼1层线体</option>
                    <option value="c2">三楼2层线体</option>
                    <option value="c3">三楼3层线体</option>
                    <option value="c4">三楼4层线体</option>
                    <option value="d1">四楼1层线体</option>
                    <option value="d2">四楼2层线体</option>
                    <option value="d3">四楼3层线体</option>
                    <option value="d4">四楼4层线体</option>
                    <option value="d5">四楼车间3层线体</option>
                    <option value="d6">四楼车间4层线体</option>
                    <option value="e1">五楼1层线体</option>
                    <option value="e2">五楼2层线体</option>
                    <option value="e3">五楼3层线体</option>
                    <option value="e4">五楼4层线体</option>
                </select>
            </div>

            <div class="input-group">
                <span class="input-group-addon sp" id="s1">设备号</span>

                <input type="text" name="NID" id="NID" class="form-control" aria-describedby="s1" onblur="changeID()">
            </div>

            <div class="input-group">
                <span class="input-group-addon sp" id="s2">标签</span>

                <input type="text" name="label" id="label" class="form-control" aria-describedby="s3" onblur="changeLabel()">
            </div>
            <div class="input-group">
                <span class="input-group-addon sp" id="s3">大小</span>

                <input type="text" name="size" id="size" readonly class="form-control" aria-describedby="s3" onblur="changeSize()">
            </div>

        </div>

    </div>



    <script src="~/js/g6.min.js"></script>  @*导入绘图库*@

    <script>
        var currentNode = "",
            addNode, addFlag = false;

        /* -------------------定义组件  start---------------------*/

        //堆垛机duiduoji_bai
        var sc = {
            class: 'sc',
            station: null,
            data: {
                StackerHandAutomatic: '',
                StackerBusy: '',
                Forkhasaterial: '',
                StackerAlarm: '',
                Stackerrunningsignal: '',
                StackerTaskCompletion: '',
                StackerTaskCompletion: '',
                SecurityDooronLine: '',
                yuliu1: '',
                yuliu2: '',
                yuliu4: '',
                Stackeralarmcode: '',
                Currentjobnumber: '',
                Currentworkordercode: '',
                Currentline: '',
                Currentcolumn: '',
                Currentlayer: '',
                StartlinetoPC: '',
                StartcolumntoPC: '',
                StartcolumntoPC: '',
                StartlayertoPC: '',
                TargetlinetoPC: '',
                TargetlinetoPC: '',
                TargetcolumntoPC: '',
                TargetlayertoPC: '',
            },
            img: '/images/duiduoji_bai.png',
            type: 'image',
            size: 110,
            label: '堆垛机',
            labelCfg: {
                position: 'bottom'
            },
            // 裁剪图片配置
            clipCfg: {
                show: false,
                type: 'circle',
                r: 15
            }
        }
        //机器人
        var rb = {
            class: 'rb',
            data: null,
            station: null,
            img: '/images/rb.svg',
            type: 'image',
            size: 80,
            label: '机器人',
            labelCfg: {
                position: 'bottom'
            },
            // 裁剪图片配置
            clipCfg: {
                show: false,
                type: 'circle',
                r: 15
            }
        }
        //ocv
        var ocv = {
            class: 'ocv', station: null,
            data: null,
            img: '/images/ocv.svg',
            type: 'image',
            size: 80,
            label: 'ocv',
            labelCfg: {
                position: 'bottom'
            },
            // 裁剪图片配置
            clipCfg: {
                show: false,
                type: 'circle',
                r: 15
            }
        }
        //盘点
        var pan = {
            class: 'pan',
            station: null,
            data: {
                ActionType:'',
                BatteryIndex:'',
                PalletBarcode:'',
                BatteryCode:'',
                AlrmCode:'',
                Reserve:'',
                Reserve2:'',
                Reserve3:'',
                Reserve4:'',
                Reserve5:'',
                Reserve6:'',
                Reserve7:'',
                Reserve8:'',
                Reserve9:'',
                Reserve10:'',
            },
            img: '/images/pan.svg',
            type: 'image',
            size: 101,
            label: '',
            labelCfg: {
                position: 'bottom'
            },
            // 裁剪图片配置
            clipCfg: {
                show: false,
                type: 'circle',
                r: 15
            }
        }
        //bcr
        var bcr = {
            class: 'bcr',
            station: null,
            data: null,
            img: '/images/saoma_68.png',
            type: 'image',
            size: [60, 36],
            label: 'bcr',
            labelCfg: {
                position: 'bottom'
            },
            // 裁剪图片配置
            clipCfg: {
                show: false,
                type: 'circle',
                r: 15
            }
        }
        var bcr2 = {
            class: 'bcr2',
            station: null,
            data: null,
            img: '/images/saoma_681.png',
            type: 'image',
            size: [36, 60],
            label: 'bcr2',
            labelCfg: {
                position: 'bottom'
            },
            // 裁剪图片配置
            clipCfg: {
                show: false,
                type: 'circle',
                r: 15
            }
        }
        //多层提升机
        var eleLayer = {
            data: {
                station: '',
                Auto: '',
                Busy: '',
                UpMaterial: '',
                DownMaterial: '',
                TaskComplete: '',
                LiftAlrm: '',
                LiftAlrmCode: '',
                Analogautomatic: '',
                CurrentFloor: '',
                CurrentLayer: '',
                CurrentUpFunction: '',
                CurrentDownFunction: '',
                UpEquipmentCode: '',
                UpTaskCode: '',
                UpPalletBarcode: '',
                UpActionType: '',
                UpPalletType: '',
                UpAlrmCode: '',
                UpReserve: '',
                UpReserve2: '',
                UpReserve3: '',
                UpReserve4: '',
                DownEquipmentCode: '',
                DownTaskCode: '',
                DownPalletBarcode: '',
                DownActionType: '',
                DownPalletType: '',
                DownAlrmCode: '',
                DownReserve: '',
                DownReserve2: '',
                DownReserve3: '',
                DownReserve4: '',
            },
            station: null,
            class: 'eleLayer',

            img: '/images/loucengtisheng.png',
            type: 'image',
            size: 120,
            label: '多层提升机',
            labelCfg: {
                position: 'bottom'
            },
            // 裁剪图片配置
            clipCfg: {
                show: false,
                type: 'circle',
                r: 15
            }
        }
        //线体提升机
        var eleLine = {
            class: 'eleLine',
            data: null, station: null,
            img: '/images/shengjiangji.png',
            type: 'image',
            size: 80,
            label: '提升机',
            labelCfg: {
                position: 'bottom'
            },
            // 裁剪图片配置
            clipCfg: {
                show: false,
                type: 'circle',
                r: 15
            }
        }
        //线体
        var line = {
            station: null,
            data: {

            }
            ,
            class: 'line',
            type: 'modelRect',
            rotate: 90,
            size: [100, 100],
            style: {
                radius: 2,
                stroke: '#69c0ff',
                fill: '#66c18c',
                lineWidth: 1,
                fillOpacity: 1,
            },
            // label configurations
            labelCfg: {
                style: {
                    fill: '#595959',
                    fontSize: 14,
                },
                offset: 30,
            },
            // left rect
            preRect: {
                show: false,
                width: 60,
                fill: '#40a9ff',
                radius: 2
            },
            // configurations for the four linkpoints
            linkPoints: {
                top: false,
                right: false,
                bottom: false,
                left: false,
                // the size of the linkpoints' circle
                size: 10,
                lineWidth: 1,
                fill: '#72CC4A',
                stroke: '#72CC4A',
            },
            // configurations for the icon
            logoIcon: {
                // whether to show the icon
                show: true,
                x: -40,
                y: 0,
                // the image url for the icon, string type
                img: '/images/right.svg'
                ,
                width: 80,
                height: 70,
                // adjust the offset along x-axis for the icon
                offset: 0,
            },
            // configurations for state icon
            stateIcon: {
                // whether to show the icon
                show: false,
                x: 0,
                y: 0,

                img: '/images/dc.svg'
                ,
                width: 75,
                height: 75,
                offset: -13,
            },
            stateStyles: {
                active: {
                    // opacity: 0.1,
                    // 修改 name 为 'node-label' 的子图形 hover 状态下的样式
                    'node-text': {
                        //  stroke: 'blue',
                    },
                },
                selected: {


                    fill: '#de1c31',


                }
            },
        }
        var lineL = {
            station: null,
            class: 'line',
            data: {

            },
            type: 'modelRect',
            rotate: 90,
            size: [100, 100],
            style: {
                radius: 2,
                stroke: '#69c0ff',
                fill: '#66c18c',
                lineWidth: 1,
                fillOpacity: 1,
            },
            // label configurations
            labelCfg: {
                style: {
                    fill: '#595959',
                    fontSize: 14,
                },
                offset: 30,
            },
            // left rect
            preRect: {
                show: false,
                width: 60,
                fill: '#40a9ff',
                radius: 2
            },
            // configurations for the four linkpoints
            linkPoints: {
                top: false,
                right: false,
                bottom: false,
                left: false,
                // the size of the linkpoints' circle
                size: 10,
                lineWidth: 1,
                fill: '#72CC4A',
                stroke: '#72CC4A',
            },
            // configurations for the icon
            logoIcon: {
                // whether to show the icon
                show: true,
                x: -40,
                y: 0,
                // the image url for the icon, string type
                img: '/images/left.svg'
                ,
                width: 80,
                height: 70,
                // adjust the offset along x-axis for the icon
                offset: 0,
            },
            // configurations for state icon
            stateIcon: {
                // whether to show the icon
                show: false,
                x: 0,
                y: 0,

                img: '/images/dc.svg'
                ,
                width: 75,
                height: 75,
                offset: -13,
            },
            stateStyles: {
                active: {
                    // opacity: 0.1,
                    // 修改 name 为 'node-label' 的子图形 hover 状态下的样式
                    'node-text': {
                        //  stroke: 'blue',
                    },
                },
                selected: {


                    fill: '#de1c31',


                }
            },
        }
        var lineU = {
            station: null,
            class: 'line',
            data: {

            },
            type: 'modelRect',
            rotate: 90,
            size: [100, 100],
            style: {
                radius: 2,
                stroke: '#69c0ff',
                fill: '#66c18c',
                lineWidth: 1,
                fillOpacity: 1,
            },
            // label configurations
            labelCfg: {
                style: {
                    fill: '#595959',
                    fontSize: 14,
                },
                offset: 30,
            },
            // left rect
            preRect: {
                show: false,
                width: 60,
                fill: '#40a9ff',
                radius: 2
            },
            // configurations for the four linkpoints
            linkPoints: {
                top: false,
                right: false,
                bottom: false,
                left: false,
                // the size of the linkpoints' circle
                size: 10,
                lineWidth: 1,
                fill: '#72CC4A',
                stroke: '#72CC4A',
            },
            // configurations for the icon
            logoIcon: {
                // whether to show the icon
                show: true,
                x: -40,
                y: 0,
                // the image url for the icon, string type
                img: '/images/shang.svg'
                ,
                width: 80,
                height: 70,
                // adjust the offset along x-axis for the icon
                offset: 0,
            },
            // configurations for state icon
            stateIcon: {
                // whether to show the icon
                show: false,
                x: 0,
                y: 0,
                img: '/images/dc.svg'
                ,
                width: 75,
                height: 75,
                offset: -13,
            },
            stateStyles: {
                active: {
                    // opacity: 0.1,
                    // 修改 name 为 'node-label' 的子图形 hover 状态下的样式
                    'node-text': {
                        //  stroke: 'blue',
                    },
                },
                selected: {


                    fill: '#de1c31',


                }
            },
        }
        var lineD = {
            station: null,
            class: 'line',
            data: {

            },
            type: 'modelRect',
            rotate: 90,
            size: [100, 100],
            style: {
                radius: 2,
                stroke: '#69c0ff',
                fill: '#66c18c',
                lineWidth: 1,
                fillOpacity: 1,
            },
            // label configurations
            labelCfg: {
                style: {
                    fill: '#595959',
                    fontSize: 14,
                },
                offset: 30,
            },
            // left rect
            preRect: {
                show: false,
                width: 60,
                fill: '#40a9ff',
                radius: 2
            },
            // configurations for the four linkpoints
            linkPoints: {
                top: false,
                right: false,
                bottom: false,
                left: false,
                // the size of the linkpoints' circle
                size: 10,
                lineWidth: 1,
                fill: '#72CC4A',
                stroke: '#72CC4A',
            },
            // configurations for the icon
            logoIcon: {
                // whether to show the icon
                show: true,
                x: -40,
                y: 0,
                // the image url for the icon, string type
                img: '/images/xia.svg'
                ,
                width: 80,
                height: 70,
                // adjust the offset along x-axis for the icon
                offset: 0,
            },
            // configurations for state icon
            stateIcon: {
                // whether to show the icon
                show: false,
                x: 0,
                y: 0,

                img: '/images/dc.svg'
                ,
                width: 75,
                height: 75,
                offset: -13,
            },
            stateStyles: {
                active: {
                    // opacity: 0.1,
                    // 修改 name 为 'node-label' 的子图形 hover 状态下的样式
                    'node-text': {
                        //  stroke: 'blue',
                    },
                },
                selected: {


                    fill: '#de1c31',


                }
            },
        }

        var lineMR = {
            station: null,
            data: {

            }
            ,
            class: 'line',
            type: 'modelRect',
            rotate: 90,
            size: [150, 100],
            style: {
                radius: 2,
                stroke: '#69c0ff',
                fill: '#66c18c',
                lineWidth: 1,
                fillOpacity: 1,
            },
            // label configurations
            labelCfg: {
                style: {
                    fill: '#595959',
                    fontSize: 14,
                },
                offset: 30,
            },
            // left rect
            preRect: {
                show: false,
                width: 60,
                fill: '#40a9ff',
                radius: 2
            },
            // configurations for the four linkpoints
            linkPoints: {
                top: false,
                right: false,
                bottom: false,
                left: false,
                // the size of the linkpoints' circle
                size: 10,
                lineWidth: 1,
                fill: '#72CC4A',
                stroke: '#72CC4A',
            },
            // configurations for the icon
            logoIcon: {
                // whether to show the icon
                show: true,
                x: -40,
                y: 0,
                // the image url for the icon, string type
                img: '/images/right.svg'
                ,
                width: 80,
                height: 70,
                // adjust the offset along x-axis for the icon
                offset: 0,
            },
            // configurations for state icon
            stateIcon: {
                // whether to show the icon
                show: false,
                x: 0,
                y: 0,

                img: '/images/dc.svg'
                ,
                width: 75,
                height: 75,
                offset: -13,
            },
            stateStyles: {
                active: {
                    // opacity: 0.1,
                    // 修改 name 为 'node-label' 的子图形 hover 状态下的样式
                    'node-text': {
                        //  stroke: 'blue',
                    },
                },
                selected: {


                    fill: '#de1c31',


                }
            },
        }
        var lineMD = {
            station: null,
            class: 'line',
            data: {

            },
            type: 'modelRect',
            rotate: 90,
            size: [100, 150],
            style: {
                radius: 2,
                stroke: '#69c0ff',
                fill: '#66c18c',
                lineWidth: 1,
                fillOpacity: 1,
            },
            // label configurations
            labelCfg: {
                style: {
                    fill: '#595959',
                    fontSize: 14,
                },
                offset: 30,
            },
            // left rect
            preRect: {
                show: false,
                width: 60,
                fill: '#40a9ff',
                radius: 2
            },
            // configurations for the four linkpoints
            linkPoints: {
                top: false,
                right: false,
                bottom: false,
                left: false,
                // the size of the linkpoints' circle
                size: 10,
                lineWidth: 1,
                fill: '#72CC4A',
                stroke: '#72CC4A',
            },
            // configurations for the icon
            logoIcon: {
                // whether to show the icon
                show: true,
                x: -40,
                y: 0,
                // the image url for the icon, string type
                img: '/images/xia.svg'
                ,
                width: 80,
                height: 70,
                // adjust the offset along x-axis for the icon
                offset: 0,
            },
            // configurations for state icon
            stateIcon: {
                // whether to show the icon
                show: false,
                x: 0,
                y: 0,

                img: '/images/dc.svg'
                ,
                width: 75,
                height: 75,
                offset: -13,
            },
            stateStyles: {
                active: {
                    // opacity: 0.1,
                    // 修改 name 为 'node-label' 的子图形 hover 状态下的样式
                    'node-text': {
                        //  stroke: 'blue',
                    },
                },
                selected: {


                    fill: '#de1c31',


                }
            },
        }
         var lineCD = {
            station: null,
            class: 'line',
            data: {

            },
            type: 'modelRect',
            rotate: 90,
            size: [100, 150],
            style: {
                radius: 2,
                stroke: '#69c0ff',
                fill: '#66c18c',
                lineWidth: 1,
                fillOpacity: 1,
            },
            // label configurations
            labelCfg: {
                style: {
                    fill: '#595959',
                    fontSize: 14,
                },
                offset: 30,
            },
            // left rect
            preRect: {
                show: false,
                width: 60,
                fill: '#40a9ff',
                radius: 2
            },
            // configurations for the four linkpoints
            linkPoints: {
                top: false,
                right: false,
                bottom: false,
                left: false,
                // the size of the linkpoints' circle
                size: 10,
                lineWidth: 1,
                fill: '#72CC4A',
                stroke: '#72CC4A',
            },
            // configurations for the icon
            logoIcon: {
                // whether to show the icon
                show: true,
                x: -40,
                y: 0,
                // the image url for the icon, string type
                img: '/images/shang.svg'
                ,
                width: 80,
                height: 70,
                // adjust the offset along x-axis for the icon
                offset: 0,
            },
            // configurations for state icon
            stateIcon: {
                // whether to show the icon
                show: false,
                x: 0,
                y: 0,
                img: '/images/dc.svg'
                ,
                width: 75,
                height: 75,
                offset: -13,
            },
            stateStyles: {
                active: {
                    // opacity: 0.1,
                    // 修改 name 为 'node-label' 的子图形 hover 状态下的样式
                    'node-text': {
                        //  stroke: 'blue',
                    },
                },
                selected: {


                    fill: '#de1c31',


                }
            },
        }
         var lineCR = {
            station: null,
            class: 'line',
            data: {

            },
            type: 'modelRect',
            rotate: 90,
            size: [150, 100],
            style: {
                radius: 2,
                stroke: '#69c0ff',
                fill: '#66c18c',
                lineWidth: 1,
                fillOpacity: 1,
            },
            // label configurations
            labelCfg: {
                style: {
                    fill: '#595959',
                    fontSize: 14,
                },
                offset: 30,
            },
            // left rect
            preRect: {
                show: false,
                width: 60,
                fill: '#40a9ff',
                radius: 2
            },
            // configurations for the four linkpoints
            linkPoints: {
                top: false,
                right: false,
                bottom: false,
                left: false,
                // the size of the linkpoints' circle
                size: 10,
                lineWidth: 1,
                fill: '#72CC4A',
                stroke: '#72CC4A',
            },
            // configurations for the icon
            logoIcon: {
                // whether to show the icon
                show: true,
                x: -40,
                y: 0,
                // the image url for the icon, string type
                img: '/images/left.svg'
                ,
                width: 80,
                height: 70,
                // adjust the offset along x-axis for the icon
                offset: 0,
            },
            // configurations for state icon
            stateIcon: {
                // whether to show the icon
                show: false,
                x: 0,
                y: 0,

                img: '/images/dc.svg'
                ,
                width: 75,
                height: 75,
                offset: -13,
            },
            stateStyles: {
                active: {
                    // opacity: 0.1,
                    // 修改 name 为 'node-label' 的子图形 hover 状态下的样式
                    'node-text': {
                        //  stroke: 'blue',
                    },
                },
                selected: {


                    fill: '#de1c31',


                }
            },
        }

        
        var lineTTMD = {
            station: null,
            class: 'line',
            data: {

            },
            type: 'modelRect',
            rotate: 90,
            size: [100, 200],
            style: {
                radius: 2,
                stroke: '#69c0ff',
                fill: '#66c18c',
                lineWidth: 1,
                fillOpacity: 1,
            },
            // label configurations
            labelCfg: {
                style: {
                    fill: '#595959',
                    fontSize: 14,
                },
                offset: 30,
            },
            // left rect
            preRect: {
                show: false,
                width: 60,
                fill: '#40a9ff',
                radius: 2
            },
            // configurations for the four linkpoints
            linkPoints: {
                top: false,
                right: false,
                bottom: false,
                left: false,
                // the size of the linkpoints' circle
                size: 10,
                lineWidth: 1,
                fill: '#72CC4A',
                stroke: '#72CC4A',
            },
            // configurations for the icon
            logoIcon: {
                // whether to show the icon
                show: true,
                x: -40,
                y: 0,
                // the image url for the icon, string type
                img: '/images/xia.svg'
                ,
                width: 80,
                height: 70,
                // adjust the offset along x-axis for the icon
                offset: 0,
            },
            // configurations for state icon
            stateIcon: {
                // whether to show the icon
                show: false,
                x: 0,
                y: 0,

                img: '/images/dc.svg'
                ,
                width: 75,
                height: 75,
                offset: -13,
            },
            stateStyles: {
                active: {
                    // opacity: 0.1,
                    // 修改 name 为 'node-label' 的子图形 hover 状态下的样式
                    'node-text': {
                        //  stroke: 'blue',
                    },
                },
                selected: {


                    fill: '#de1c31',


                }
            },
        }   
        var lineTTMR = {
            station: null,
            data: {

            }
            ,
            class: 'line',
            type: 'modelRect',
            rotate: 90,
            size: [200, 100],
            style: {
                radius: 2,
                stroke: '#69c0ff',
                fill: '#66c18c',
                lineWidth: 1,
                fillOpacity: 1,
            },
            // label configurations
            labelCfg: {
                style: {
                    fill: '#595959',
                    fontSize: 14,
                },
                offset: 30,
            },
            // left rect
            preRect: {
                show: false,
                width: 60,
                fill: '#40a9ff',
                radius: 2
            },
            // configurations for the four linkpoints
            linkPoints: {
                top: false,
                right: false,
                bottom: false,
                left: false,
                // the size of the linkpoints' circle
                size: 10,
                lineWidth: 1,
                fill: '#72CC4A',
                stroke: '#72CC4A',
            },
            // configurations for the icon
            logoIcon: {
                // whether to show the icon
                show: true,
                x: -40,
                y: 0,
                // the image url for the icon, string type
                img: '/images/right.svg'
                ,
                width: 80,
                height: 70,
                // adjust the offset along x-axis for the icon
                offset: 0,
            },
            // configurations for state icon
            stateIcon: {
                // whether to show the icon
                show: false,
                x: 0,
                y: 0,

                img: '/images/dc.svg'
                ,
                width: 75,
                height: 75,
                offset: -13,
            },
            stateStyles: {
                active: {
                    // opacity: 0.1,
                    // 修改 name 为 'node-label' 的子图形 hover 状态下的样式
                    'node-text': {
                        //  stroke: 'blue',
                    },
                },
                selected: {


                    fill: '#de1c31',


                }
            },
        }
        var lineTMD = {
            station: null,
            class: 'line',
            data: {

            },
            type: 'modelRect',
            rotate: 90,
            size: [100, 200],
            style: {
                radius: 2,
                stroke: '#69c0ff',
                fill: '#66c18c',
                lineWidth: 1,
                fillOpacity: 1,
            },
            // label configurations
            labelCfg: {
                style: {
                    fill: '#595959',
                    fontSize: 14,
                },
                offset: 30,
            },
            // left rect
            preRect: {
                show: false,
                width: 60,
                fill: '#40a9ff',
                radius: 2
            },
            // configurations for the four linkpoints
            linkPoints: {
                top: false,
                right: false,
                bottom: false,
                left: false,
                // the size of the linkpoints' circle
                size: 10,
                lineWidth: 1,
                fill: '#72CC4A',
                stroke: '#72CC4A',
            },
            // configurations for the icon
            logoIcon: {
                // whether to show the icon
                show: true,
                x: -40,
                y: 0,
                // the image url for the icon, string type
                img: '/images/shang.svg'
                ,
                width: 80,
                height: 70,
                // adjust the offset along x-axis for the icon
                offset: 0,
            },
            // configurations for state icon
            stateIcon: {
                // whether to show the icon
                show: false,
                x: 0,
                y: 0,
                img: '/images/dc.svg'
                ,
                width: 75,
                height: 75,
                offset: -13,
            },
            stateStyles: {
                active: {
                    // opacity: 0.1,
                    // 修改 name 为 'node-label' 的子图形 hover 状态下的样式
                    'node-text': {
                        //  stroke: 'blue',
                    },
                },
                selected: {


                    fill: '#de1c31',


                }
            },
        }
        var lineTMR = {
            station: null,
            class: 'line',
            data: {

            },
            type: 'modelRect',
            rotate: 90,
            size: [200, 100],
            style: {
                radius: 2,
                stroke: '#69c0ff',
                fill: '#66c18c',
                lineWidth: 1,
                fillOpacity: 1,
            },
            // label configurations
            labelCfg: {
                style: {
                    fill: '#595959',
                    fontSize: 14,
                },
                offset: 30,
            },
            // left rect
            preRect: {
                show: false,
                width: 60,
                fill: '#40a9ff',
                radius: 2
            },
            // configurations for the four linkpoints
            linkPoints: {
                top: false,
                right: false,
                bottom: false,
                left: false,
                // the size of the linkpoints' circle
                size: 10,
                lineWidth: 1,
                fill: '#72CC4A',
                stroke: '#72CC4A',
            },
            // configurations for the icon
            logoIcon: {
                // whether to show the icon
                show: true,
                x: -40,
                y: 0,
                // the image url for the icon, string type
                img: '/images/left.svg'
                ,
                width: 80,
                height: 70,
                // adjust the offset along x-axis for the icon
                offset: 0,
            },
            // configurations for state icon
            stateIcon: {
                // whether to show the icon
                show: false,
                x: 0,
                y: 0,

                img: '/images/dc.svg'
                ,
                width: 75,
                height: 75,
                offset: -13,
            },
            stateStyles: {
                active: {
                    // opacity: 0.1,
                    // 修改 name 为 'node-label' 的子图形 hover 状态下的样式
                    'node-text': {
                        //  stroke: 'blue',
                    },
                },
                selected: {


                    fill: '#de1c31',


                }
            },
        }

        
        var lineLR = {
            station: null,
            class: 'line',
            data: {

            },
            type: 'modelRect',
            rotate: 90,
            size: [100, 100],
            style: {
                radius: 2,
                stroke: '#69c0ff',
                fill: '#66c18c',
                lineWidth: 1,
                fillOpacity: 1,
            },
            // label configurations
            labelCfg: {
                style: {
                    fill: '#595959',
                    fontSize: 14,
                },
                offset: 30,
            },
            // left rect
            preRect: {
                show: false,
                width: 60,
                fill: '#40a9ff',
                radius: 2
            },
            // configurations for the four linkpoints
            linkPoints: {
                top: false,
                right: false,
                bottom: false,
                left: false,
                // the size of the linkpoints' circle
                size: 10,
                lineWidth: 1,
                fill: '#72CC4A',
                stroke: '#72CC4A',
            },
            // configurations for the icon
            logoIcon: {
                // whether to show the icon
                show: true,
                x: -44,
                y: 0,
                // the image url for the icon, string type
                img: '/images/left_right.svg'
                ,
                width: 90,
                height: 45,
                // adjust the offset along x-axis for the icon
                offset: 0,
            },
            // configurations for state icon
            stateIcon: {
                // whether to show the icon
                show: false,
                x: 0,
                y: 0,

                img: '/images/dc.svg'
                ,
                width: 75,
                height: 75,
                offset: -13,
            },
            stateStyles: {
                active: {
                    // opacity: 0.1,
                    // 修改 name 为 'node-label' 的子图形 hover 状态下的样式
                    'node-text': {
                        //  stroke: 'blue',
                    },
                },
                selected: {


                    fill: '#de1c31',


                }
            },
        }
        var lineUD = {
            station: null,
            class: 'line',
            data: {

            },
            type: 'modelRect',
            rotate: 90,
            size: [100, 100],
            style: {
                radius: 2,
                stroke: '#69c0ff',
                fill: '#66c18c',
                lineWidth: 1,
                fillOpacity: 1,
            },
            // label configurations
            labelCfg: {
                style: {
                    fill: '#595959',
                    fontSize: 14,
                },
                offset: 30,
            },
            // left rect
            preRect: {
                show: false,
                width: 60,
                fill: '#40a9ff',
                radius: 2
            },
            // configurations for the four linkpoints
            linkPoints: {
                top: false,
                right: false,
                bottom: false,
                left: false,
                // the size of the linkpoints' circle
                size: 10,
                lineWidth: 1,
                fill: '#72CC4A',
                stroke: '#72CC4A',
            },
            // configurations for the icon
            logoIcon: {
                // whether to show the icon
                show: true,
                x: -22,
                y: 0,
                // the image url for the icon, string type
                img: '/images/shang_xia.svg'
                ,
                width: 45,
                height: 90,
                // adjust the offset along x-axis for the icon
                offset: 0,
            },
            // configurations for state icon
            stateIcon: {
                // whether to show the icon
                show: false,
                x: 0,
                y: 0,

                img: '/images/dc.svg'
                ,
                width: 75,
                height: 75,
                offset: -13,
            },
            stateStyles: {
                active: {
                    // opacity: 0.1,
                    // 修改 name 为 'node-label' 的子图形 hover 状态下的样式
                    'node-text': {
                        //  stroke: 'blue',
                    },
                },
                selected: {


                    fill: '#de1c31',


                }
            },
        }

        var lineqR = {
            station: null,
            class: 'line',
            data: {

            },
            type: 'modelRect',
            rotate: 90,
            size: [200, 100],
            style: {
                radius: 2,
                stroke: '#69c0ff',
                fill: '#66c18c',
                lineWidth: 1,
                fillOpacity: 1,
            },
            // label configurations
            labelCfg: {
                style: {
                    fill: '#595959',
                    fontSize: 14,
                },
                offset: 30,
            },
            // left rect
            preRect: {
                show: false,
                width: 60,
                fill: '#40a9ff',
                radius: 2
            },
            // configurations for the four linkpoints
            linkPoints: {
                top: false,
                right: false,
                bottom: false,
                left: false,
                // the size of the linkpoints' circle
                size: 10,
                lineWidth: 1,
                fill: '#72CC4A',
                stroke: '#72CC4A',
            },
            // configurations for the icon
            logoIcon: {
                // whether to show the icon
                show: true,
                x: -70,
                y: 0,
                // the image url for the icon, string type
                img: '/images/left_right.svg'
                ,
                width: 140,
                height: 70,
                // adjust the offset along x-axis for the icon
                offset: 0,
            },
            // configurations for state icon
            stateIcon: {
                // whether to show the icon
                show: false,
                x: 0,
                y: 0,

                img: '/images/dc.svg'
                ,
                width: 75,
                height: 75,
                offset: -13,
            },
            stateStyles: {
                active: {
                    // opacity: 0.1,
                    // 修改 name 为 'node-label' 的子图形 hover 状态下的样式
                    'node-text': {
                        //  stroke: 'blue',
                    },
                },
                selected: {


                    fill: '#de1c31',


                }
            },
        }
        var lineqD = {
            station: null,
            class: 'line',
            data: {

            },
            type: 'modelRect',
            rotate: 90,
            size: [100, 200],
            style: {
                radius: 2,
                stroke: '#69c0ff',
                fill: '#66c18c',
                lineWidth: 1,
                fillOpacity: 1,
            },
            // label configurations
            labelCfg: {
                style: {
                    fill: '#595959',
                    fontSize: 14,
                },
                offset: 30,
            },
            // left rect
            preRect: {
                show: false,
                width: 60,
                fill: '#40a9ff',
                radius: 2
            },
            // configurations for the four linkpoints
            linkPoints: {
                top: false,
                right: false,
                bottom: false,
                left: false,
                // the size of the linkpoints' circle
                size: 10,
                lineWidth: 1,
                fill: '#72CC4A',
                stroke: '#72CC4A',
            },
            // configurations for the icon
            logoIcon: {
                // whether to show the icon
                show: true,
                x: -34,
                y: 0,
                // the image url for the icon, string type
                img: '/images/shang_xia.svg'
                ,
                width: 70,
                height: 140,
                // adjust the offset along x-axis for the icon
                offset: 0,
            },
            // configurations for state icon
            stateIcon: {
                // whether to show the icon
                show: false,
                x: 0,
                y: 0,

                img: '/images/dc.svg'
                ,
                width: 75,
                height: 75,
                offset: -13,
            },
            stateStyles: {
                active: {
                    // opacity: 0.1,
                    // 修改 name 为 'node-label' 的子图形 hover 状态下的样式
                    'node-text': {
                        //  stroke: 'blue',
                    },
                },
                selected: {


                    fill: '#de1c31',


                }
            },
        }







        //仓库
        var warehouse = {
            station: null,
            class: 'warehouse',
            data: null,

            img: '/images/hjl.png',
            type: 'image',
            size: [600, 80],
            label: 'xiangdao',
            labelCfg: {
                position: 'bottom'
            },
            // 裁剪图片配置
            clipCfg: {
                show: false,
                type: 'circle',
                r: 15
            }
        }
        //标签
        var lb = {

            class: 'lb',
            data: null,

            type: 'rect',
            label: '标签',
            style: {
                fill: '#bae63700',
                //stroke: '#eaff8f',
                lineWidth: 0,
                // radius: 10,
            },
            labelCfg: {
                style: {
                    fill: '#3c3c3c',
                    fontSize: 30,
                },
                position: 'center',
            }
        }
        /* -------------------定义组件 end---------------------*/
        //插件
        const minimap = new G6.Minimap({
            size: [280, 200],
            className: 'minimap',
            type: 'delegate',

        });
        const grid = new G6.Grid();
        const snapLine = new G6.SnapLine();
        const toolbar = new G6.ToolBar({
            position: {
                x: window.innerWidth * 0.21,
                y: 20
            },


        });
        // 创建 G6 图实例
        const graph = new G6.Graph({
            container: 'mountNode', // 指定图画布的容器 id，与第 9 行的容器对应
            fitView: true,
            fitViewPadding: [50, 50, 100, 50],
            enabledStack: true,
            // 画布宽高
            width: document.getElementById('mountNode').offsetWidth,
            height: document.getElementById('mountNode').offsetHeight,
            modes: {
                default: ['drag-canvas', 'zoom-canvas', 'drag-node'],
            },
            plugins: [grid, minimap, snapLine, toolbar], // 将 minimap 实例配置到图上
        });
        //打开页面加载第一个布局
        $.ajax({
            type: "POST",
            url: "/MonitorEditor/GetMonitorConfigInfoByFloor",
            data: {
                floor: 'a1'
            },
            dataType: "JSON",
            success: function(result) {

                let localData = JSON.parse(result[0].json);

                // 读取数据
                if (localData) {
                    graph.data(localData)
                    graph.render();

                }
                console.log("读取" + 'a1')

            }
        });

        //----鼠标事件-----\\
        graph.on('node:mouseenter', (evt) => {
            const {
                item
            } = evt;
            graph.setItemState(item, 'active', true);
        });
        graph.on('node:mouseleave', (evt) => {
            const {
                item
            } = evt;
            graph.setItemState(item, 'active', false);
        });
        graph.on('node:click', (evt) => {
            let item = evt.item; // 被操作的节点 item
            let target = evt.target; // 被操作的具体图形
            graph.setItemState(item, 'selected', true);
            if (currentNode == "") {
                currentNode = item._cfg.id
                document.getElementById('nid').innerText = currentNode;
                document.getElementById("NID").value = item.getModel().station ?? '';
                document.getElementById('size').value = item.getModel().size ?? '';
                document.getElementById('label').value = item.getModel().label ?? '';
            }


        });
        graph.on('canvas:click', (evt) => {
            currentNode = "";
            document.getElementById('nid').innerText = currentNode;

            document.getElementById('label').value = '';
            document.getElementById('size').value = '';
            document.getElementById('NID').value = '';


            graph.getNodes().forEach((node) => {
                graph.clearItemStates(node);
            });
        });
        graph.setAutoPaint(true);
        document.querySelector('#line').addEventListener('mousedown', function(e) {
            addFlag = true
            addNode = JSON.parse(JSON.stringify(line));

        });
        document.querySelector('#lineL').addEventListener('mousedown', function(e) {
            addFlag = true
            addNode = JSON.parse(JSON.stringify(lineL));


        });
        document.querySelector('#lineU').addEventListener('mousedown', function(e) {
            addFlag = true
            addNode = JSON.parse(JSON.stringify(lineU));


        });
        document.querySelector('#lineD').addEventListener('mousedown', function(e) {
            addFlag = true
            addNode = JSON.parse(JSON.stringify(lineD));


        });
        document.querySelector('#lineMD').addEventListener('mousedown', function(e) {
            addFlag = true
            addNode = JSON.parse(JSON.stringify(lineMD));


        });
        document.querySelector('#lineMR').addEventListener('mousedown', function(e) {
            addFlag = true
            addNode = JSON.parse(JSON.stringify(lineMR));


        });

         document.querySelector('#lineqD').addEventListener('mousedown', function(e) {
            addFlag = true
            addNode = JSON.parse(JSON.stringify(lineqD));


        });
        document.querySelector('#lineqR').addEventListener('mousedown', function(e) {
            addFlag = true
            addNode = JSON.parse(JSON.stringify(lineqR));


        });







        document.querySelector('#lineLR').addEventListener('mousedown', function(e) {
            addFlag = true
            addNode = JSON.parse(JSON.stringify(lineLR));


        });
        document.querySelector('#lineUD').addEventListener('mousedown', function(e) {
            addFlag = true
            addNode = JSON.parse(JSON.stringify(lineUD));

        });
        document.querySelector('#lineTTMD').addEventListener('mousedown', function(e) {
            addFlag = true
            addNode = JSON.parse(JSON.stringify(lineTTMD));



        });
        document.querySelector('#lineTTMR').addEventListener('mousedown', function(e) {
            addFlag = true
            addNode = JSON.parse(JSON.stringify(lineTTMR));



        });
        document.querySelector('#lineTMD').addEventListener('mousedown', function(e) {
            addFlag = true
            addNode = JSON.parse(JSON.stringify(lineTMD));



        });
        document.querySelector('#lineTMR').addEventListener('mousedown', function(e) {
            addFlag = true
            addNode = JSON.parse(JSON.stringify(lineTMR));



        });

        document.querySelector('#lineCR').addEventListener('mousedown', function(e) {
            addFlag = true
            addNode = JSON.parse(JSON.stringify(lineCR));


        });
        document.querySelector('#lineCD').addEventListener('mousedown', function(e) {
            addFlag = true
            addNode = JSON.parse(JSON.stringify(lineCD));


        });


        document.querySelector('#eleLine').addEventListener('mousedown', function(e) {
            addFlag = true
            addNode = JSON.parse(JSON.stringify(eleLine));


        });
        document.querySelector('#eleLayer').addEventListener('mousedown', function(e) {
            addFlag = true
            addNode = JSON.parse(JSON.stringify(eleLayer));

        });
        document.querySelector('#rb').addEventListener('mousedown', function(e) {
            addFlag = true
            addNode = JSON.parse(JSON.stringify(rb));


        });
        document.querySelector('#sc').addEventListener('mousedown', function(e) {
            addFlag = true
            addNode = JSON.parse(JSON.stringify(sc));
        });
        document.querySelector('#warehouse').addEventListener('mousedown', function(e) {
            addFlag = true
            addNode = JSON.parse(JSON.stringify(warehouse));
        });
        document.querySelector('#lb').addEventListener('mousedown', function(e) {
            addFlag = true
            addNode = JSON.parse(JSON.stringify(lb));
        });
        document.querySelector('#ocv').addEventListener('mousedown', function(e) {
            addFlag = true
            addNode = JSON.parse(JSON.stringify(ocv));
        });
        document.querySelector('#bcr').addEventListener('mousedown', function(e) {
            addFlag = true
            addNode = JSON.parse(JSON.stringify(bcr));
        });
        document.querySelector('#bcr2').addEventListener('mousedown', function(e) {
            addFlag = true
            addNode = JSON.parse(JSON.stringify(bcr2));
        });
        document.querySelector('#pan').addEventListener('mousedown', function(e) {
            addFlag = true
            addNode = JSON.parse(JSON.stringify(pan));
        });
        document.addEventListener('mousemove', function(e) {

            if (addFlag == false) {
                return;
            }
            const point = graph.getPointByClient(e.clientX, e.clientY);
            addNode.x = point.x;
            addNode.y = point.y;
            //  console.log('渲染坐标 x/y 分别为:', point.x, point.y);


        });
        document.addEventListener('mouseup', function(e) {
            if (addFlag == true) {

                var ND = 'node' + addNode.class + Math.ceil(Math.random() * 100000);
                addNode.id = ND;
                graph.addItem('node', addNode);
                console.log('up')
                addNode = null;
                addFlag = false;
            }

        });
        //删除
        function del() {
            if (currentNode != "" || currentNode != null) {
                const item = graph.findById(currentNode)
                graph.removeItem(item);
                currentNode = "";
                document.getElementById('nid').innerText = currentNode;

                document.getElementById('label').value = '';
                document.getElementById('size').value = '';
                document.getElementById('NID').value = '';

            } else {

                alert('请选择要删除元素')
            }

        }
        //保存
        function save() {
            //alert("数据已保存")
            let layer = document.getElementById('selectLayer').value
            let data1 = graph.save();
            console.log(data1)
            obj = JSON.stringify(data1); //转化为JSON字符串

            $.ajax({
                type: "POST",
                url: "/MonitorEditor/UpdateMonitorConfigInfoByLayer",
                data: {
                    layer: layer,
                    json: obj
                },
                dataType: "JSON",
                success: function(result) {
                    //console.log("保存" + result)
                    alert("保存成功!")
                }
            });
        }
        //改变标签
        function changeLabel() {
            if (currentNode != "" || currentNode != null) {
                const item = graph.findById(currentNode)
                let model = {

                    label: document.getElementById('label').value ?? '',

                }


                graph.updateItem(item, model);
                graph.refreshItem(item)
            }

        }
        //改变设备号
        function changeID() {
            if (currentNode != "" || currentNode != null) {
                const item = graph.findById(currentNode)
                let model = {

                    station: document.getElementById('NID').value ?? '',

                }


                graph.updateItem(item, model);
                graph.refreshItem(item)
            }

        }
        //下拉框切换布局
        function selectChange() {


            $.ajax({
                type: "POST",
                url: "/MonitorEditor/GetMonitorConfigInfoByFloor",
                data: {
                    floor: event.target.value
                },
                dataType: "JSON",
                success: function(result) {
                    let localData = JSON.parse(result[0].json);
                    // 读取数据
                    if (localData) {
                        graph.changeData(localData)
                        graph.fitView(200);
                    }
                }
            });
            console.log(event.target.value)


        }

        //键盘事件
        window.addEventListener("keydown", function(e) {

            if (event.keyCode == 46) {
                del();
            }
            if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
                e.preventDefault();
                save();
            }
        }, false);


    </script>
</body>

</html>